<template>
	<view>
		<topNav title="查看详情"></topNav>
<!-- 		<view class="sub-title">总价值</view>
		<view class="all-wrapper">
			<view class="left">
				<view class="price">¥9,258</view>
				<view class="desc">当前可提现金额：1000 AGT <br>
汇率：0.8762usdt</view>
			</view>
			<view class="right">
				<view class="send">发送</view>
				<view class="get">接收</view>
			</view>
		</view> -->
		<view class="detail-wrapper">
			<view class="detail-content">
				<view class="detail-list" v-for="item in record" :class="item.type==1?'green':'yellow'">
					<view class="circle"></view>
					<view class="left">
						<view class="info">{{item.dis}}</view>
						<view class="desc">sdak..sssss</view>
					</view>
					<view class="right">
						<view class="info">{{item.count}} BTC</view>
						<view class="desc">{{item.add_time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	export default{
		components:{
			topNav:topNav
		},
		data(){
			return {
				record:[]
			}
		},
		onLoad(options) {
			this.$u.post('/api/PowerPoolDetails', {account_id:uni.getStorageSync('account_id'),source:options.source}).then(res=>{
				if(res.code==200){
					this.record = res.data
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					})
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.sub-title{
		font-size:12*2rpx;
		padding-left:40rpx;
		margin: 40rpx 0 12rpx;
	}
	.all-wrapper{
		display: flex;
		align-items: center;
		padding:0 40rpx;
		.left{
			flex:1;
			.price{
				font-size:80rpx;
			}
			.desc{
				font-size:28rpx;
				color:rgba(255,255,255,0.6);
			}
		}
		.right{
			.send{
				width: 60*2rpx;
				height: 26*2rpx;
				background: #FFB721;
				border-radius: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.get{
				width: 60*2rpx;
				height: 26*2rpx;
				background: #333;
				border-radius: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top:36rpx;
			}
		}
	}
	.detail-wrapper{
		padding:0 20*2rpx;
		.title{
			font-size: 24*2rpx;
			margin-top:50*2rpx;
		}
		.detail-content{
			border-left: 1px solid #fff;
			margin:25*2rpx 0 130rpx;
			padding-bottom:248*2rpx;
			.detail-list{
				display:flex;
				align-items: center;
				position:relative;
				padding-left:48rpx;
				margin-bottom:30rpx;
				.left{
					flex:1;
				}
				.right{
					text-align: right;
				}
				.info{
					font-size:14*2rpx;
					margin-bottom:10rpx;
				}
				.desc{
					font-size:10*2rpx;
					color:#8D8D8D;
				}
				.circle{
					position:absolute;
					width: 16*2rpx;
					height: 16*2rpx;
					border-radius: 50%;
					left:-16rpx;
					top:0;
				}
				&.green{
					.circle{
						background: #FFFFFF;
						border: 1px solid #69DA73;
						padding:2px;
						&:after{
							content:'';
							display: block;
							width:100%;
							height:100%;
							border-radius:50%;
							background-color: #69DA73;
						}
					}
					.left{
						.info{
							color:#69DA73;
						}
					}
					.right{
						.info{
							color:#FFB721;
						}
					}
				}
				&.yellow{
					.circle{
						background: #FFFFFF;
						border: 1px solid #FFB721;
						padding:2px;
						&:after{
							content:'';
							display: block;
							width:100%;
							height:100%;
							border-radius:50%;
							background-color: #FFB721;
						}
					}
					.left{
						.info{
							color:#FFB721;
						}
					}
					.right{
						.info{
							color:#69DA73;
						}
					}
				}
			}
		}
	}
</style>
